<template>
  <div class="storemanagement">
    <store-leftmenus active="1"></store-leftmenus>
    <div class="storemanagement-main">
      <Breadcrumb :title="title"></Breadcrumb>
      <div class="storemanagement-main_content">
        <div>
          <div class="contenttitle">基本信息</div>
          <div class="storemanagement-main_contentFirst">
            <div class="main_contentFirst-input">
              <p class="input-p">店铺名称：</p>
              <el-input v-model="storeName" placeholder="请输入内容"></el-input>
            </div>
            <div class="main_contentFirst-input">
              <p class="input-p">地址：</p>
              <div class="address-select">
                <el-select
                  v-model="customerForm.province"
                  placeholder="省份"
                  @change="selectProvince"
                  style="width:200px"
                >
                  <el-option
                    v-for="province in cityList"
                    :key="province.id"
                    :label="province.name"
                    :value="province.id"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="customerForm.city"
                  placeholder="市级"
                  @change="selectCity"
                  style="width:200px"
                >
                  <el-option
                    v-for="city in citys"
                    :key="city.id"
                    :label="city.name"
                    :value="city.id"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="customerForm.country"
                  placeholder="县级"
                  style="width:200px"
                  :disabled="disable"
                >
                  <el-option
                    v-for="county in countys"
                    :key="county.id"
                    :label="county.name"
                    :value="county.id"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="main_contentFirst-input">
              <p class="input-p">详细地址：</p>
              <el-input v-model="address" placeholder="请输入内容"></el-input>
            </div>
            <div class="main_contentFirst-input contentFirst-img">
              <p class="input-p">店铺图标:</p>
              <el-upload
                class="avatar-uploader"
                :action="BASE_URL"
                :show-file-list="false"
                :on-success="handleAvatarSuccess1"
                :before-upload="beforeAvatarUpload"
                :headers="{'Authorization':Authorization}"
                :data="{'folderName':'shop'}"
              >
                <img v-if="imgurl.imgurl1" :src="imgurl.imgurl1" class="avatar" align="middle" />
                <div v-else class="upimg">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                </div>
              </el-upload>
            </div>
            <div class="main_contentFirst-input contentFirst-img">
              <p class="input-p">banner：</p>
              <el-upload
                class="avatar-uploader"
                :action="BASE_URL"
                :show-file-list="false"
                :on-success="handleAvatarSuccess2"
                :before-upload="beforeAvatarUpload"
                :headers="{'Authorization':Authorization}"
                :data="{'folderName':'shop'}"
              >
                <img v-if="imgurl.imgurl2" :src="imgurl.imgurl2" class="avatar1" align="middle" />
                <div v-else class="upimg">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                </div>
              </el-upload>
            </div>
            <div class="main_contentFirst-input contentFirst-img" style="margin:0;marginTop:-10px">
              <p class="input-p"></p>
              <p style="color:#666;">banner图最佳尺寸为500px * 240 px</p>
            </div>
            <!-- <div class="main_contentFirst-input">
                            <p class="input-p">营业时间：</p>
                            <el-date-picker
                                v-model="timer"
                                type="datetimerange"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                format="yyyy-MM-dd HH:mm:ss"
                                value-format="yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
            </div>-->
            <div class="main_contentFirst-input">
              <p class="input-p">店铺描述：</p>
              <el-input type="textarea" rows="6" v-model="des" placeholder="请输入内容"></el-input>
            </div>
            <!-- <div class="main_contentFirst-input" style="align-items: center;">
                            <p class="input-p">自营/入驻：</p>
                            <el-checkbox v-model="isSelf" :disabled1="disable1">选择自营</el-checkbox>
            </div>-->
          </div>
        </div>
      </div>
      <div class="storemanagement-foot">
        <el-button type="primary" @click="send">提交</el-button>
        <!-- <el-button v-if="storeState" type="danger" @click="storeDelete">删除</el-button> -->
      </div>
    </div>
  </div>
</template>

<script>
import StoreLeftmenus from "@/views/components/StoreLeftmenus";
import Breadcrumb from "@/views/components/Breadcrumb";
import { mapState } from "vuex";
import { BASE_URL, getTime } from "@/utils/service.js";
export default {
  data() {
    return {
      title: {
        group: "店铺管理",
        name: "店铺基本信息设置",
      },
      text: "",
      BASE_URL,
      disable: false,
      disable1: true,
      storeState: false,
      customerForm: {
        province: "",
        city: "",
        country: "",
      },
      imgurl: {
        imgurl1: "",
        imgurl2: "",
      },
      cityList: [],
      countys: [],
      citys: [],
      storeName: "",
      address: "",
      des: "",
      timer: [],
      obj: {},
      // isSelf: null
    };
  },
  components: {
    StoreLeftmenus,
    Breadcrumb,
  },
  created() {
    this.findAllArea();
    this.getDetail();
    this.Authorization = localStorage.getItem("intrachaincode");
  },
  methods: {
    async getDetail() {
      if (this.print.id) {
        this.storeState = true;
        const res = await this.axios.getDetail();
        if (res.data.code == 200) {
          let form = res.data.data;
          this.storeName = form.storeName;
          this.address = form.address;
          this.customerForm.province = form.provinceId;
          this.customerForm.city = form.cityId;
          this.customerForm.country = form.seatId;
          this.imgurl.imgurl1 = form.storeIcon;
          this.imgurl.imgurl2 = form.storeBanner;
          this.des = form.des;
          // this.isSelf = !!this.print.isSelf
          // this.$set(this.timer, 0, getTime(form.startTime))
          // this.$set(this.timer, 1, getTime(form.endTime))
          this.selectCity1();
        } else {
          this.$message.error(res.data.message)
        }
      } else {
        // this.storeState = false
      }
    },
    async findAllArea() {
      // 获取省市区
      const res = await this.axios.findAllArea();
      this.cityList = res.data.data;
      this.selectCity1();
    },
    async updateStore() {
      // 更新店铺
      let obj1 = {
        storeId: this.print.id,
        // storeNo: this.print.storeNo,
        cate1Id: this.print.cate1Id,
        // applyId: this.print.applyId,
      };
      this.getObj(obj1);
      const res = await this.axios.updateStore(this.obj);
      if (res.data.code === 200) {
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 2500,
          onClose: () => {
            this.$router.go(0);
          },
        });
      } else {
        this.$message({
          message: res.data.message,
          type: "warning",
        });
      }
    },
    async createStore() {
      // 创建店铺
      //   let obj1 = {}
      const res = await this.axios.createStore(this.obj);
      if (res.data.code === 200) {
        this.$message({
          message: "创建成功",
          type: "success",
          duration: 2000,
          onClose: () => {
            this.$router.go(0);
          },
        });
      } else {
        this.$message({
          message: res.data.message,
          type: "warning",
        });
      }
    },
    async deleteStore() {
      let obj = {
        id: this.print.id,
        storeNo: this.print.storeNo,
        cate1Id: this.print.cate1Id,
        applyId: this.print.applyId,
        uid: this.print.uid,
        owner: this.print.owner,
        phone: this.print.phone,
      };
      const res = await this.axios.deleteStore(obj);
      if (res.data.code === 200) {
        this.$message({
          message: "删除成功",
          type: "success",
          duration: 2000,
          onClose: () => {
            this.$router.go(0);
          },
        });
      } else {
        this.$message({
          message: res.data.message,
          type: "warning",
        });
      }
    },
    storeDelete() {
      // 点击删除
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteStore();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    send() {
      if (this.storeState) {
        // 更新店铺
        this.updateStore();
      } else {
        // 新增店铺
        this.findAllArea();
      }
    },
    getObj(obj1) {
      let provinceName;
      let cityName;
      let seatName = "";
      this.cityList.map((el) => {
        if (el.id === this.customerForm.province) {
          provinceName = el.name;
        }
        el.regionDtoList.map((el1) => {
          if (el1.id === this.customerForm.city) {
            cityName = el1.name;
          }
          if (el1.regionDtoList.length) {
            el1.regionDtoList.map((el2) => {
              if (el2.id === this.customerForm.country) {
                seatName = el2.name;
              }
            });
          }
        });
      });
      this.obj = {
        // storeName: this.storeName,
        // uid: this.print.uid,
        provinceId: this.customerForm.province,
        cityId: this.customerForm.city,
        seatId: this.customerForm.country,
        provinceName,
        cityName,
        seatName,
        address: this.address,
        // owner: this.print.owner,
        // phone: this.print.phone,
        icon: this.imgurl.imgurl1,
        banner: this.imgurl.imgurl2,
        // startTime: this.timer[0],
        // endTime: this.timer[1],
        // isSelf: 1,
        des: this.des,
        ...obj1,
      };
    },
    selectProvince() {
      // 选中省份事件
      this.customerForm.city = "";
      this.customerForm.country = "";
      this.citys = [];
      this.countys = [];
      let province = this.cityList.filter((item) => {
        return item.id === this.customerForm.province;
      });
      this.citys = province[0].regionDtoList;
    },
    selectCity() {
      // 选中城市
      this.customerForm.country = "";
      this.countys = [];
      let city = this.citys.filter((item) => {
        return item.id === this.customerForm.city;
      });
      this.countys = city[0].regionDtoList;
      if (!this.countys.length) {
        this.disable = true;
      } else {
        this.disable = false;
      }
    },
    selectCity1() {
      // 初始化省市县
      if (this.cityList.length && this.customerForm.province) {
        let province = this.cityList.filter((item) => {
          return item.id === this.customerForm.province;
        });
        this.citys = province[0].regionDtoList;
        let city = this.citys.filter((item) => {
          return item.id === this.customerForm.city;
        });
        this.countys = city[0].regionDtoList;
        if (!this.countys.length) {
          this.disable = true;
          this.customerForm.country = "";
        } else {
          this.disable = false;
        }
      }
      if (!this.customerForm.country) {
        this.customerForm.country = "";
        this.disable = true;
      }
    },
    handleAvatarSuccess1(res, file) {
      // 获取图片url
      this.imgurl.imgurl1 = res.data.url;
    },
    handleAvatarSuccess2(res, file) {
      this.imgurl.imgurl2 = res.data.url;
    },
    beforeAvatarUpload(file) {
      // 上传图片
      const typeArr = ["image/jpeg", "image/png", "image/gif"];
      const isLt2M = file.size / 1024 / 1024 < 1;
      const typeType = typeArr.indexOf(file.type);
      if (typeType < 0) {
        this.$message.error("请选择JPG/PNG/GIF格式的图片!");
      }
      if (!isLt2M) {
        this.$message.error("请选择不超过1MB的图片!");
      }
      return typeType >= 0 && isLt2M;
    },
  },
  computed: {
    ...mapState({
      print: (state) => state.print.all,
    }),
  },
};
</script>

<style lang="scss" scoped>
.storemanagement {
  display: flex;
  justify-content: center;
  .storemanagement-main {
    width: 960px;
    background-color: #fff;
    padding: 10px;
    .storemanagement-main_content {
      border: 1px solid rgba(229, 230, 234, 1);
      border-top: 0;
      margin: 15px 0;
      .contenttitle {
        box-sizing: border-box;
        padding: 10px;
        line-height: 28px;
        font-weight: bold;
        height: 50px;
        background-color: rgba(245, 245, 245, 1);
        border-top: 2px solid rgba(176, 184, 184, 1);
      }
      .storemanagement-main_contentFirst {
        padding-left: 80px;
        padding-right: 80px;
        padding-bottom: 20px;
        .main_contentFirst-input {
          display: flex;
          margin: 15px 0;
          .input-p {
            min-width: 80px;
            line-height: 40px;
          }
          .address-select {
            /deep/ .el-select + .el-select {
              margin-left: 10px;
            }
          }
        }
        .contentFirst-img {
          display: flex;
          .upimg {
            display: flex;
            position: relative;
            span {
              position: absolute;
              top: 0;
              left: 5px;
            }
          }
          /deep/ .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            cursor: pointer;
            position: relative;
            overflow: hidden;
          }
          /deep/ .avatar-uploader .el-upload:hover {
            border-color: #409eff;
          }
          /deep/ .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 150px;
            height: 150px;
            line-height: 150px;
            text-align: center;
          }
          /deep/ .avatar {
            width: 150px;
            height: 150px;
            display: block;
          }
          .avatar1 {
            width: 500px;
            height: 240px;
          }
        }
      }
    }
    .storemanagement-foot {
      padding: 20px;
      display: flex;
      justify-content: center;
      /deep/ .el-button {
        min-width: 100px;
        border-radius: 0;
      }
      /deep/ .el-button--primary.is-active,
      .el-button--primary:active {
        background-color: rgb(4, 153, 143);
      }
      /deep/ .el-button--primary {
        background-color: rgba(0, 186, 173, 1);
        border-color: rgba(0, 186, 173, 1);
      }
    }
  }
}
</style>
